<template>
  <div class="coupon">
    <h5>交易明细</h5>
    <div class="coupon-header">
      <div class="search-inp">
        <div class="item">
          <span class="item-text">商户信息</span>
          <el-input
            v-model="shmc"
            placeholder="请输入商家营业执照名称"></el-input>
        </div>
        <div class="item">
          <span class="item-text">商户号</span>
          <el-input
            v-model="shh"
            placeholder="请输入zg开头的用户号"></el-input>
        </div>
        <div class="item">
          <span class="item-text">业务类型</span>
          <el-select v-model="ywlx" placeholder="请选择">
            <el-option
              v-for="item in searchoptions2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="item-text">订单编号</span>
          <el-input  v-model="ddbh"  placeholder="请输入订单编号"></el-input>
        </div>
        <div class="item">
          <span class="item-text">起止时间</span>
          <el-date-picker
            v-model="timeArr"
            type="datetimerange"
            value-format="yyyy年MM月dd日 HH时mm分ss秒"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="button-box">
        <el-button type="primary" plain @click="searchClick">查询</el-button>
        <el-button type="info" plain @click="emptyClick">清空</el-button>
        <el-button type="primary" plain @click="downloadClick">下载</el-button>
      </div>
    </div>
    <div class="tabs">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row>
              <el-col :span="7">
                <div class="table-props-item">
                  <span>商户名称：</span>
                  <span>{{props.row.shmc}}</span>
                </div>
                <div class="table-props-item">
                  <span>商户用户号：</span>
                  <span>{{props.row.shh}}</span>
                </div>
                <div class="table-props-item">
                  <span>交易时间：</span>
                  <span>{{props.row.jysj}}</span>
                </div>
                <div class="table-props-item">
                  <span>交易手续费：</span>
                  <span>{{props.row.jysxf}}</span>
                </div>
                <div class="table-props-item">
                  <span>平台服务费：</span>
                  <span>{{props.row.ptfwf}}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="table-props-item">
                  <span>业务类型：</span>
                  <span>{{props.row.ywlx}}</span>
                </div>
                <div class="table-props-item">
                  <span>订单编号：</span>
                  <span>{{props.row.ddbh}}</span>
                </div>
                <div class="table-props-item">
                  <span>交易金额（元）：</span>
                  <span>{{props.row.jyje}}</span>
                </div>
                <div class="table-props-item">
                  <span>手续费金额（元）：</span>
                  <span>{{props.row.sxfje}}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="table-props-item">
                  <span>结算状态：</span>
                  <span>{{props.row.shmc}}</span>
                </div>
                <div class="table-props-item">
                  <span>可划付金额（元）：</span>
                  <span>{{props.row.khfje}}</span>
                </div>
                <div class="table-props-item">
                  <span>划付手续费（元）：</span>
                  <span>{{props.row.hfsxf}}</span>
                </div>
                <div class="table-props-item">
                  <span>商家待结算金额（元）：</span>
                  <span>{{props.row.sjdjsje}}</span>
                </div>
                <div class="table-props-item">
                  <span>平台待结算金额（元）：</span>
                  <span>{{props.row.ptdjsje}}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="table-props-item">
                  <span>划付发起时间：</span>
                  <span>{{props.row.hffqsj}}</span>
                </div>
                <div class="table-props-item">
                  <span>商家结算金额：</span>
                  <span>{{props.row.sjjsje}}</span>
                </div>
                <div class="table-props-item">
                  <span>平台结算金额：</span>
                  <span>{{props.row.ptjsje}}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="shmc" label="商户信息" width="300"></el-table-column>
        <el-table-column prop="jysj" label="交易时间"></el-table-column>
        <el-table-column prop="jyje" label="交易金额（元）"></el-table-column>
        <el-table-column prop="khfje" label="可划付金额（元）"></el-table-column>
        <el-table-column label="划付状态" width="90">
          <template slot-scope="scope">
            <span>{{scope.row.hfzt}}</span>
          </template>
        </el-table-column>
        <el-table-column label="分账状态" width="90">
          <template slot-scope="scope">
            <span>{{scope.row.fzzt}}</span>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        baseurl:'',
        tableData: [],//列表数据
        shmc: "",//搜索参数-商户信息
        shh: "",//搜索参数-商户号
        ddbh: "",//搜索参数-订单编号
        ywlx: "", //搜索参数-业务类型
        timeArr:[],//搜索参数-起止时间
        searchoptions2: [//业务类型
            { id: "1", name: "商超" },
            { id: "2", name: "酒店预定" },
            { id: "3", name: "直播带货" },
            { id: "4", name: "短信VIP充值" },
            { id: "6", name: "外卖" },
            { id: "7", name: "突突到家" },
            { id: "8", name: "电商" },
        ],
        //分页
        limit: 5,
        page: 1,
        total: 0,
        currentPage: 1,
    };
  },
  mounted() {
    this.baseurl=this.$store.state.baseurlfz
    this.getCoupon();
  },
  methods: {
    //获取交易明细列表
    getCoupon() {
      var urlsearch='&shmc='+this.shmc+'&shh='+this.shh+'&ddbh='+this.ddbh+'&ywlx='+this.ywlx
      if(this.timeArr.length==2){urlsearch+='&jysj='+this.timeArr[0]+'-'+this.timeArr[1]}
      this.axios({
        url: this.baseurl + "/jymx/getJymx?limit="+this.limit+'&page='+this.page + urlsearch,
        method: "get",
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          console.log(this.tableData,this.total)
        } else {
          alert(res.data.errmsg);
        }
      });
    },
    //查询
    searchClick(){
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //清空
    emptyClick(){
        this.shmc=''
        this.shh=''
        this.ddbh=''
        this.ywlx=''
        this.timeArr=[]
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //下载
    downloadClick(){

    },
    //分页
    handleSizeChange(val) {
      this.limit = val;
      this.getCoupon();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCoupon();
    },
    //处理时间戳
    format(shijianchuo) {
      var time = new Date(shijianchuo * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var f = time.getMinutes();
      var s = time.getSeconds();
      //想要什么格式可以自己改
      // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
      return y + "-" + m + "-" + d + " " + this.add0(h) + ":" + this.add0(f);
    },
    //小于10的时候，前边加0（08：08：12）
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
  },
  watch: {
  },
};
</script>

<style scoped>
.coupon > h5 {
  display: flex;
  justify-content: space-between;
}
.coupon-header {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  /* width: 330px; */
  margin-bottom: 12px;
  display: flex;
}
.search-inp .item-text {
  width: 90px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.search-inp input{
    width: 200px;
}
.button-box{
    margin-top: 20px;
    margin-left:20px;
}
.tabs {
    margin-top: 40px;
    padding-left: 20px;
}
.table-props-item{
  padding: 10px;
  text-align: left;
}
.table-props-item>span:first-child{
  padding-right: 10px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.content {
  width: 700px;
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  padding: 30px;
}
.item-content {
  margin-top: 10px;
}
.item-left,
.item-right {
  display: inline-block;
  width: 47%;
}
.item-left .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
  margin-right: 5px;
}
.item-right .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
}
.item span,.my-top {
  margin-top: 10px;
}
.remark {
  display: flex;
  align-items: flex-start;
}
</style>
<style>
.el-date-editor .el-range-separator {
  width: 10% !important;
}
.search-inp .el-input{
  width: auto;
}
.search-inp .el-input__inner{
    width: 200px;
}
.el-pagination{
    margin-top: 20px;
    text-align: right;
}
</style>
